/**
 * 组件代码
 */
Vue.component('comSougnMap', {
    name: 'comSougnMap',
    props: ['config', 'data'],
    data: function () {
        return {
            content: "",
        }
    },
    computed: {
        myConfig: function () {
            var data = {};
            for (var item of this.config) {
                data[item.id] = item.value;
            }
            var defaultV = {
                width: '100%',
                color: data.color,
                height: '100%',
                data: data.data
            };

            return defaultV;
        },
    },
    watch: {
        data: function (oldValue, newValue) {
            this.dataChange();
        }
    },
    mounted() {
        this.dataChange();
    },
    methods: {
        dataChange: function () {
            var data = window.getValue(this.myConfig.data);
            mapboxgl.accessToken = 'pk.eyJ1IjoidXR1dHV1dCIsImEiOiJjankzcXNrczIwODRzM2huemhsMDR3bHpiIn0.JGPCzWl2mr48UJp97maN-g';
            var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v11'
            });
        }
    },
    template: `<div :style="myConfig" id="map">{{content}}</div>`,
});
/**
 * 配置项
 * @type {{name: string, id: string, type: string, value: string}[]}
 */
var comSougnMapConfig = [{
    name: "字体颜色",
    type: "color",
    value: "#eee",
    id: "color"
}, {
    name: "数据",
    type: "data",
    value: "",
    id: "data"
}]
